<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>result</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function(){
            // 开始写 jQuery 代码...
            // 给下拉列表绑定改变事件
            $("#city").change(function(){
                //alert($(this).val());
                window.location.href='http://localhost:8080/weather?city='+$(this).val();
            })
        });
    </script>
</head>

<body>
    <h1>奶兔天气预报</h1>
    <div>请选择城市：
        <select id="city" >
            <option th:each="c:${list}" th:value="${c.cityid}" th:text="${c.city}"  th:selected="${c.cityid == cityname}">城市</option>
        </select>
    </div>
    <h2>当前城市:<span  th:text="${weatherData.result.area}"></span></h2>
    <hr>
    响应码：<span th:text="${weatherData.code}">200</span>
    <br>
    响应信息：<span th:text="${weatherData.msg}">成功</span>
    <br>
    省份：<span th:text="${weatherData.result.province}">北京</span>
    地区：<span th:text="${weatherData.result.area}">北京</span>

    <ul>

        <li th:each="daydata:${weatherData.result.list}" class="card" style="width:10rem;height:28rem;display: inline-block;">
            <img th:src="@{'/png/'+${daydata.weatherimg}}"/>
            <div class="card-body">
                <h5 class="card-title" th:text="${daydata.week}">Card title</h5>
                <p class="card-text" th:text="${daydata.date}">content</p >
                <p class="card-text" th:text="${daydata.weather}">content</p >
                <p class="card-text" th:text="${daydata.real}">content</p >
                <p class="card-text" th:text="${#strings.substring(daydata.tips,0,35)}" style="height:10rem;">content</p >
            </div>

        </li>
    </ul>
</body>
</html>